<template>
    <div class="wallet-import">
        <ul class="wallet-header-list clearfix">
            <li>{{$t('wallet.keystoreJson')}}</li>
        </ul>
        <el-card class="box-card wallet-content">
            <el-form ref="byKeyStore" :model="byKeyStore" :rules="byKeyStoreRule" label-position="top">
                <el-form-item prop="account" :label="$t('wallet.walletName')">
                    <el-input :placeholder="$t('wallet.individualWalletName')" v-model.trim="byKeyStore.account"></el-input>
                </el-form-item>
                <el-form-item :label="$t('wallet.keystore')">
                    <span v-show="hasRead" class="file-box">
                        {{$t("wallet.browse")}}
                        <input type="file" class="file" id="file" @change="getFileName"/>
                    </span>
                    <span v-show="hasRead" class="f12">{{$t("wallet.unselectedFile")}}</span>
                </el-form-item>
                <el-form-item v-show="!hasRead">
                    <span class="document icon-left"></span>
                    <el-input class="input-file" disabled v-model.trim="fileName"></el-input>
                    <span class="document icon-size">{{fileSize}}</span>
                    <span class="document icon-right" @click="stop"></span>
                    <span v-show="!hasRead"  class="line"></span>
                </el-form-item>
                <el-form-item prop="password" :label="$t('wallet.password')">
                    <el-input v-if="visible" type="password" v-model.trim="byKeyStore.password" :placeholder="$t('wallet.decryptKeystore')">
                        <i slot="suffix" title="显示密码" @click="changePass('show')" class="iconToggle icon-eye"></i>
                    </el-input>
                    <el-input v-else type="text" v-model.trim="byKeyStore.password" :placeholder="$t('wallet.decryptKeystore')">
                        <i slot="suffix" title="隐藏密码" @click="changePass('hide')" class="iconToggle icon-hide"></i>
                    </el-input>
                </el-form-item>
                <div class="tab-list">
                    <el-button @click.native="cancel" type="default">{{$t('form.cancel')}}</el-button>
                    <el-button @click.native="importByKeystore" type="primary">{{$t('wallet.import')}}</el-button>
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { importKeystore } from '../../../createAccount'
export default {
    name: "o-wallet-import",
    data() {
        return{
            fileName: '',
            fileSize: 0,
            hasRead: true,
            byKeyStore: {
                account:'',
                password:''
            },
            visible: true
        }
    },
    computed: {
        byKeyStoreRule(){
            return{
                account:{required: true, validator:this.checkAccount, trigger: 'blur,change'},
                password:[
                    {required: true, message: this.$t('form.nonPsw'), trigger: 'blur,change'}
                ]
            }
        }
    },
    activated(){
        this.reset()
    },
    methods: {
        reset(){
            this.fileName = '';
            this.fileSize = 0;
            this.hasRead = true;
            this.byKeyStore = {
                account:'',
                password:''
            }
        },
        changePass(value) {
            this.visible = !(value === 'show');
        },
        checkAccount(rule, value, callback){
            if(!value){
                callback(new Error( this.$t('wallet.walletNameRequired')))
            }else{
                callback();
            }
        },
        cancel(){
            this.$refs['byKeyStore'].resetFields();
            this.$router.push('/o-wallet-list')
        },
        getFileName(val) {
            if(val) {
                let file = document.getElementById("file").files[0];
                if(file){
                    this.fileName =  file.name;
                    this.fileSize = (file.size/1024).toFixed(2)+'kb';
                    this.hasRead = false;
                }
            }
        },
        stop(){
            this.hasRead = true;
            document.getElementById('file').value=null;
        },
        importByKeystore(){
            this.$refs['byKeyStore'].validate((valid)=>{
                if(valid){
                    let file = document.getElementById('file').files[0];
                    if(!file){
                        this.$message.error(this.$t('wallet.fileRequired'));
                        return;
                    };
                    let name = file.name;
                    this.fileName = name;
                    let dirPath = file.path.replace(name,'') + name;

                    importKeystore(dirPath,this.byKeyStore.password,this.byKeyStore.account,(resp)=>{
                        // console.log(resp)
                        if(resp.code == 200){
                            // 导入成功
                            this.$refs['byKeyStore'].resetFields();
                            this.$message({
                                message: this.$t('wallet.importSuccess'),
                                type: 'success'
                            })
                            this.$router.push('/o-wallet-list')
                        }else{
                            // 导入失败
                            this.$message({
                                // message: this.$t('wallet.importFail'),
                                message: resp.msg,
                                type: 'error'
                            })
                        }
                    })
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.wallet-import{
    position:absolute;
    top:60px;
    bottom:22px;
    left:10px;
    right:10px;
    .wallet-header-list{
        height:30px;
        >li{
            height:30px;
            line-height: 30px;
            float: right;
            margin: 0 20px 0;
            cursor: pointer;
            color: #32C5DD;
            border-bottom:solid 2px #32C5DD;
        }
    }
    .box-card{
        width:100%;
        height:95%;
        margin: 0 auto;
        .el-form{
            width: 300px;
            margin: 0 auto;
            .file-box{
                position: relative;
                margin-right:8px;
                margin-bottom:9px;
                width: 76px;
                height: 30px;
                line-height: 30px;
                display: inline-block;
                background: #32C5DD;
                border-radius: 4px;
                text-align: center;
                font-size: 12px;
                color: #FFFFFF;
                letter-spacing: 1px;
                .file{
                    height: 60px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;

                }
            }
            .document{
                width: 16px;
                height: 16px;
                display: inline-block;
                position: absolute;
                z-index: 22;
            }
            .f12{
                font-size:12px;
            }
            .icon-left{
                left:14px;
                top:12px;
                background: url("../images/icon-file.png") no-repeat center center;
                background-size: 16px 16px;
            }
            .icon-right{
                top:12px;
                left:272px;
                cursor:pointer;
                background: url("../images/icon-delete.png") no-repeat center center;
                background-size: 16px 16px;
            }
            .icon-size{
                top:0;
                left:234px;
                height:40px;
                line-height:40px;
                opacity: 0.5;
                font-size: 10px;
                color: #9EABBE;
            }
            .line{
                width: 0;
                height: 2px;
                position: absolute;
                left: 0;
                top: 39px;
                display: inline-block;
                background: #32C5DD;
                animation: loading 3s;
                animation-fill-mode: forwards;
            }
            .tab-list {
                width:300px;
                padding-top:15px;
                display:inline-block;
                display: flex;
                justify-content: space-between;
            }
            .el-button{
                width:80px;
                height:32px;
                padding:0;
                font-size:12px;
            }
            .el-button+.el-button {
                margin-left: 40px;
            }
        }
    }
    @keyframes loading{
        from {
            width: 0;
        }
        to{
            width: 300px;
        }
    }
    .warn{
        margin:-2px 0 0;
        font-size: 12px;
        color: #F5A623;
        white-space: nowrap;
    }
}
</style>